<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 权限设置列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li>
                                <a>基础配置</a>
                            </li>
                            <li>
                                <a>权限列表</a>
                            </li>
                        </ol>
                    </div>
                    <div class="content-wrapper">
                        <div class="search-condition">
                            <div>
                                <div class="filter-wrapper">
                                    <ul class="clearfix">
                                        <li class="filter-item ">
                                            <label>员工姓名</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>员工工号</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>审批层级</label>
                                            <div>
                                                <select v-select2 id="approvalStatus">
                                                    <option value='0'>全部</option>
                                                    <option value='1'>CEO审批</option>
                                                    <option value='2'>财务审批</option>
                                                    <option value='3'>直属领导审批</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>单据类型</label>
                                            <div>
                                                <select v-select2 id="receiptType">
                                                    <option value='0'>全部</option>
                                                    <option value='1'>销售单</option>
                                                    <option value='2'>进货单</option>
                                                    <option value='3'>退货单</option>
                                                    <option value='4'>采购单</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="filter-item">
                                            <a class="revision-btn revision-btn-search">搜索</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info" style="margin-bottom: 0px">
                                <a class="revision-btn" v-on:click="editShow(0)">新增</a>
                                <a class="revision-btn" v-on:click="accreidShow()">授权</a>
                                <span>总条数：<span>12 条</span></span>
                            </div>
                        </div>
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>#序号</th>
                                    <th>姓名</th>
                                    <th>工号</th>
                                    <th>单据类型</th>
                                    <th>审批层级</th>
                                    <th>授权信息</th>
                                    <th>创建日期</th>
                                    <th>创建人</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>张三</td>
                                    <td>123123</td>
                                    <td>进货单、销售单</td>
                                    <td>财务</td>
                                    <td  class="text-navy">
                                        授权人姓名：李四<br />
                                        授权人工号：12345<br />
                                        <span> 授权有效期：2018-12-30 到 2019-01-03</span>
                                    </td>
                                    <td>2018-12-24</td>
                                    <td>老板</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="editShow(1)">编辑</a>
                                        <a href="javascript:;" v-on:click="editShow(3)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>小白</td>
                                    <td>7777</td>
                                    <td>销售单</td>
                                    <td>销售经理</td>
                                    <td></td>
                                    <td>2018-12-24</td>
                                    <td>老板</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="editShow(1)">编辑</a>
                                        <a href="javascript:;" v-on:click="editShow(3)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>小黑</td>
                                    <td>99999</td>
                                    <td>采购单</td>
                                    <td>出纳</td>
                                    <td></td>
                                    <td>2018-12-24</td>
                                    <td>老板</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="editShow(1)">编辑</a>
                                        <a href="javascript:;" v-on:click="editShow(3)">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 权限编辑 -->
                <modal v-bind:show.sync="editModal.show" v-bind:style="editModal .style" v-bind:add-class="editModal.addClass">
                    <h4 slot="header">{{modalTitle}}</h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal" novalidate="novalidate">
                            <div>
                                <h3 class="panel-title">权限设定</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">审批层级</label>
                                <div class="col-sm-3">
                                    <select id="backStatus">
                                        <option value='0'>所有</option>
                                        <option value='1'>财务</option>
                                        <option value='2'>出纳</option>
                                        <option value='3'>仓管</option>
                                        <option value='4'>老板</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">单据类型</label>
                                <div class="col-sm-10" style="margin-top: 5px;padding-left: 9px">
                                    <input class="revision-checkbox" type="checkbox" /> 销售单
                                    <input class="revision-checkbox" type="checkbox" /> 进货单
                                    <input class="revision-checkbox" type="checkbox" /> 采购单
                                    <input class="revision-checkbox" type="checkbox" /> 退货单
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">选择员工</h3>
                            </div>
                            <div class="search-condition">
                                <div>
                                    <div class="filter-wrapper">
                                        <ul class="clearfix">
                                            <li class="filter-item " style="width: 250px;">
                                                <label style="width: 70px;">员工姓名</label>
                                                <div>
                                                    <div class="fill-wrapper" style="width: 150px; margin-left: -30px;">
                                                        <input id="serialNumber" type="text" class="fill-item">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="filter-item " style="width: 250px;">
                                                <label style="width: 70px;">员工姓名</label>
                                                <div>
                                                    <div class="fill-wrapper" style="width: 150px; margin-left: -30px;">
                                                        <input id="serialNumber" type="text" class="fill-item">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="filter-item">
                                                <a class="revision-btn revision-btn-search">搜索</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-hover table-bordered" style="margin-top: 20px;">
                                <thead>
                                    <tr>
                                        <th>#序号</th>
                                        <th>姓名</th>
                                        <th>工号</th>
                                        <th>所在部门</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>张三</td>
                                        <td>123123</td>
                                        <td>财务</td>
                                        <td>
                                            <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>李四</td>
                                        <td>123123</td>
                                        <td>财务</td>
                                        <td>
                                            <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>王五</td>
                                        <td>123123</td>
                                        <td>财务</td>
                                        <td>
                                            <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>刘六</td>
                                        <td>123123</td>
                                        <td>财务</td>
                                        <td>
                                            <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div slot="footer" style="text-align:center">
                        <a href="javascript:;" id="approve" class="revision-btn"> 保存</a>
                        <a href="javascript:;" id="approve" class="revision-btn-default" v-on:click="this.editModal.close()"> 取消</a>
                    </div>
                </modal>
                <!-- 授权 -->
                <modal v-bind:show.sync="accreidModal.show" v-bind:style="accreidModal .style" v-bind:add-class="accreidModal.addClass">
                    <h4 slot="header">授权</h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal" novalidate="novalidate">
                            <div>
                                <h3 class="panel-title">权限设定</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">授权人</label>
                                <div class="col-sm-3">
                                    <a class="revision-btn" v-on:click="selectEmployeeShow()">选择</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">被授权人</label>
                                <div class="col-sm-3">
                                    <a class="revision-btn" v-on:click="selectEmployeeShow()">选择</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">有效期</label>
                                <div class="col-sm-10">
                                    <div class="fill-wrapper fill-wrapper-auto">
                                        <input id="costTimeStart" type="text" class="fill-item  revision-time" readonly="readonly">
                                    </div>
                                    <div class="fill-desc">到</div>
                                    <div class="fill-wrapper fill-wrapper-auto">
                                        <input id="costTimeEnd" type="text" class="fill-item  revision-time" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">单据类型</label>
                                <div class="col-sm-10" style="margin-top: 5px;padding-left: 9px">
                                    <input class="revision-checkbox" type="checkbox" /> 销售单
                                    <input class="revision-checkbox" type="checkbox" /> 进货单
                                    <input class="revision-checkbox" type="checkbox" /> 采购单
                                    <input class="revision-checkbox" type="checkbox" /> 退货单
                                </div>
                            </div>
                        </form>
                    </div>
                    <div slot="footer" style="text-align:center">
                        <a href="javascript:;" id="approve" class="revision-btn"> 保存</a>
                    </div>
                </modal>
                <!-- 选择员工 -->
                <modal v-bind:show.sync="selectEmployeeModal.show" v-bind:style="selectEmployeeModal .style"
                    v-bind:add-class="selectEmployeeModal.addClass">
                    <h4 slot="header">{{modalTitle}}</h4>
                    <div slot="body" class="clearfix">
                        <div class="search-condition">
                            <div>
                                <div class="filter-wrapper">
                                    <ul class="clearfix">
                                        <li class="filter-item " style="width: 250px;">
                                            <label style="width: 70px;">员工姓名</label>
                                            <div>
                                                <div class="fill-wrapper" style="width: 150px; margin-left: -30px;">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item " style="width: 250px;">
                                            <label style="width: 70px;">员工姓名</label>
                                            <div>
                                                <div class="fill-wrapper" style="width: 150px; margin-left: -30px;">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item">
                                            <a class="revision-btn revision-btn-search">搜索</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <table class="table table-hover table-bordered" style="margin-top: 20px;">
                            <thead>
                                <tr>
                                    <th>#序号</th>
                                    <th>姓名</th>
                                    <th>工号</th>
                                    <th>所在部门</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>张三</td>
                                    <td>123123</td>
                                    <td>财务</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>李四</td>
                                    <td>123123</td>
                                    <td>财务</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>王五</td>
                                    <td>123123</td>
                                    <td>财务</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>刘六</td>
                                    <td>123123</td>
                                    <td>财务</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="editShow(1)">选择</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </modal>
            </div>
        </div>
    </div>
    <script src="../content/js/lib/vue/vue.min.js"></script>
    <script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../content/static/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../content/js/lib/calendar/calendar.js"></script>
    <script src="../content/js/lib/calendar/scrollbar.js"></script>
    <script src="../content/js/lib/vue/vue-modal.js"></script>
    <script src="../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../content/js/common.js"></script>
    <script src="../content/js/lib/vue/select2.js"></script>
    <script type="text/javascript">
$(function () {
            //时间验证
            var calObj = new $.Calendar({
                //time: true,
                skin: 'white'
            });
            $('#costTimeStart').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    endTime = $('#costTimeEnd').val();
                calObj.pick({
                    elem: this,
                    endDate: endTime
                });
            });
            $('#costTimeEnd').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    startTime = $('#costTimeStart').val();
                calObj.pick({
                    elem: this,
                    startDate: startTime
                });
            });
});

        $("#approvalStatus").select2({
            width: "160px"
        });
        $("#receiptType").select2({
            width: "160px"
        });
        var vmData = {
            modalTitle: "新增权限",
            editModal: {
                show: false,
                style: {
                    width: '780px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.editModal.show = false;
                }
            },
            accreidModal: {
                show: false,
                style: {
                    width: '580px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.accreidModal.show = false;
                }
            },
            selectEmployeeModal: {
                show: false,
                style: {
                    width: '780px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.selectEmployeeModal.show = false;
                }
            },
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            editShow: function (obj) {
                vm.editModal.show = true;
                $("#backStatus").select2({
                    width: "210px"
                });
                $("#backStatus").val('').trigger('change'); //初始化 
                if (obj == 1)
                    vm.$set("modalTitle", "编辑权限");
            },
            accreidShow: function () {
                vm.accreidModal.show = true;
            },
            selectEmployeeShow: function () {
                vm.selectEmployeeModal.show = true;
            },
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>